var ayKeyPoint = new Array();
var myGlobal = new GlobalConst();
var oldPoint = new CPoint(0, 0);
var c;
var ctx;

//main(){}
$(document).ready(function() {
    InitWebApp();
});

//初始化WebApp

function InitWebApp() {
    c = document.getElementById("myCanvas");
    ctx = c.getContext("2d");
    var controlPoint1 = new CKeyPoint(20, 200, false);
    var controlPoint2 = new CKeyPoint(200, 300, false);
    var controlPoint3 = new CKeyPoint(70, 100, false);
    var controlPoint4 = new CKeyPoint(170, 150, false);
    ayKeyPoint.push(controlPoint1);
    ayKeyPoint.push(controlPoint2);
    ayKeyPoint.push(controlPoint3);
    ayKeyPoint.push(controlPoint4);
    clearCanvas();
    darwShape(ayKeyPoint);
    initKeyPointStyle(ayKeyPoint);    
}


//鼠标在画布上单击左键响应：设置关键点

function getKeyPoint(e) {
    isMouseDown = true;
    var mypoint = new CPoint(e.offsetX, e.offsetY);
    oldPoint.X = e.offsetX;
    oldPoint.Y = e.offsetY;
    myGlobal.IndexKeyPoint = indexOfSelectKeyPoint(mypoint, ayKeyPoint);
    if (myGlobal.IndexKeyPoint > -1) {
        setKeyPointStyle(ayKeyPoint, myGlobal.IndexKeyPoint);
    }
}

//鼠标在画布上弹起左键响应：注销关键点

function disabledKeyPoint() {
    isMouseDown = false;
    myGlobal.IndexKeyPoint = -1;
    clearCanvas();
    darwShape(ayKeyPoint);
    initKeyPointStyle(ayKeyPoint);
}

//鼠标在画布上移动响应

function changeShape(e) {
    var x = e.clientX;
    var y = e.clientY;
    var px = e.offsetX;


    var py = e.offsetY;
    var xdiff = e.offsetX - oldPoint.X;
    var ydiff = e.offsetY - oldPoint.y;

    oldPoint.X = e.offsetX;
    oldPoint.y = e.offsetY;

    var oldx = $("#myCanvas").css("left");
    var oldy = $("#myCanvas").css("top");
    document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + "|" + px + "," + py + ")";
    if (isMouseDown) {
        clearCanvas();
        if (myGlobal.IndexKeyPoint > -1) {
            ayKeyPoint[myGlobal.IndexKeyPoint].X = px;
            ayKeyPoint[myGlobal.IndexKeyPoint].Y = py;
            darwShape(ayKeyPoint);
            initKeyPointStyle(ayKeyPoint);
            setKeyPointStyle(ayKeyPoint, myGlobal.IndexKeyPoint);
        } else {
            resetShapeKeyPoint(ayKeyPoint, xdiff, ydiff);
            darwShape(ayKeyPoint);
            initKeyPointStyle(ayKeyPoint);
        }

    }
}

//清除画布内容

function clearCanvas() {
    ctx.clearRect(0, 0, 600, 600);
}

//绘制图形

function darwShape(ayckp) {
    ctx.beginPath();
    ctx.moveTo(ayckp[0].X, ayckp[0].Y);
    var i = 1;
    for (var i = 1; i < ayckp.length; i++) {
        ctx.lineTo(ayckp[i].X, ayckp[i].Y);
    }
    ctx.closePath();
    ctx.stroke();
}

//初始化关键点样式

function initKeyPointStyle(ayckp) {
    for (var i = 0; i < ayckp.length; i++) {
        ctx.beginPath();
        ctx.arc(ayckp[i].X, ayckp[i].Y, myGlobal.KeyPointRadius, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
    }
}

//设置选中后关键点样式

function setKeyPointStyle(ayckp, index) {
    if ((isMouseDown) && (ayckp[index].IsSelected)) {
        ctx.beginPath();
        ctx.arc(ayckp[index].X, ayckp[index].Y, myGlobal.KeyPointRadius, 0, 2 * Math.PI);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.closePath();
        ctx.stroke();
    }
}

//返回选中的关键点索引值

function indexOfSelectKeyPoint(mypoint, ayckp) {
    var index = -1;
    for (var i = 0; i < ayckp.length; i++) {
        ayckp[i].IsSelected = false;
        if (getDistance(mypoint, ayckp[i]) < myGlobal.KeyPointRadius + 2) {
            index = i;
            ayckp[index].IsSelected = true;
        }
    }
    return index;
}

function resetShapeKeyPoint(ayckp, xdiff, ydiff) {
    var xdiff = xdiff;
    var ydiff = ydiff;
    for (var i = 0; i < ayckp.length; i++) {
        ayckp[i].X = ayckp[i].X + xdiff;
        ayckp[i].Y = ayckp[i].Y + ydiff;
    }
}

function moveCanvas(x, y) {
    var x = x;
    var y = y;
    $("#myCanvas").offset({
        top: x,
        left: y
    });
}